<template>
  <div class="calendar">
    <table class="table30">
      <tr>
        <td class="week" v-for="item in weekArrayList" :key="item">
          {{ item }}
        </td>
      </tr>
      <template v-for="trArr in w30Data" :key="trArr">
        <tr class="tr30">
          <template v-for="item in trArr" :key="item.date">
            <td class="td-date">
              <div
                v-if="item.day"
                class="content"
                :class="{ click: item === clickItem }"
                @click="itemClick(item)"
              >
                <div class="day">{{ item.day }}</div>
                <img class="img" :src="imgUrl(item.code)" />
                <div
                  class="tmp"
                  :class="{
                    max: item.max === 'true',
                    min: item.min === 'true',
                  }"
                >
                  {{ item.maxTmp }}°~{{ item.minTmp }}°
                </div>
              </div>
            </td>
          </template>
        </tr>
      </template>
    </table>
  </div>
</template>

<script setup>
import { imgUrl } from "@/utils/imgUrl";

import useWeather30Store from "@/stores/modules/weather30";
import { storeToRefs } from "pinia";

const props = defineProps({
  day30: {
    type: Array,
  },
});

const weekArrayList = ["日", "一", "二", "三", "四", "五", "六"];

const w30Data = computed(() => {
  const allTr = [[], [], [], [], []];
  const size = 7;
  if (!props.day30.length) return [];

  const firstWeek = new Date(props.day30[0]?.date).getDay();
  for (let i = 0; i < firstWeek; i++) {
    allTr[0].push("");
  }
  allTr[0][firstWeek] = props.day30[0];
  // 第一组添加了第一条数据还要得长度
  const residueLength = size - allTr[0].length;
  for (let i = 0; i < residueLength; i++) {
    allTr[0].push(props.day30[i + 1]);
  }

  const makeTr = (num1, num2 = 0) => {
    return props.day30.slice(
      residueLength + 1 + size * num1,
      num2 > 0 ? residueLength + 1 + size * num2 : props.day30.length
    );
  };
  allTr[1] = makeTr(0, 1);
  allTr[2] = makeTr(1, 2);
  allTr[3] = makeTr(2, 3);
  // allTr[4] = makeTr(3);
  if (firstWeek < 6) {
    allTr[4] = makeTr(3);
  } else {
    allTr[4] = makeTr(3, 4);
    allTr.push([]);
    allTr[5] = makeTr(4, 5);
  }
  // 补全第5排数据
  for (let i = 0; i < size; i++) {
    if (!allTr[4][i]) allTr[4][i] = "";
  }
  return allTr;
});

const weatherStore = useWeather30Store();
const { clickItem } = storeToRefs(weatherStore);

const itemClick = (item) => {
  weatherStore.fetchItemClick(item);
};
</script>

<style lang="less" scoped>
.calendar {
  padding: 20px 10px;
  margin-bottom: 20px;
  background: #edf2fb;
  border-radius: 16px;
  .table30 {
    width: 100%;
    border-radius: 12px;
    .week {
      padding: 10px;
      text-align: center;
      font-size: 13px;
      border-bottom: 1px solid #e5eaef;
    }
    .tr30 {
      margin: 3px 0;
      td {
        padding: 0 5px 0;
        margin: 5px 0 0;
        width: 14.28%;

        .content {
          text-align: center;
          padding: 2px 7px 4px 10px;
          margin: 5px 0 0;
          border-radius: 8px;
          border: 1px solid transparent;
          background: #fff;

          .day {
            font-size: 15px;
            color: rgba(0, 0, 0, 0.5);
          }
          .img {
            width: 28px;
          }
          .tmp {
            font-size: 13px;
            margin: 4px auto 0;
            border-radius: 8px;
            padding: 1px 0;
          }
          .max {
            color: #fff;
            background-color: #f18360;
          }
          .min {
            color: #fff;
            background-color: #427bff;
          }
        }
        .click {
          border: 2px solid #368eff;
        }
      }
    }
  }
}
</style>